<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<%@ include file="/WEB-INF/views/shop/shopListTmpl.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>商家管理</title>
    <link rel="stylesheet" href="${ctx}/static/plug/frozenui-1.3.0/css/frozen.css" media="all">
    <link rel="stylesheet" href="${ctx}/static/css/user/register.css" media="all">
    <style type="text/css">
        .div-noUnpay {
            margin: 0px auto;
            text-align: center;
            color: #898989;
            padding-top: 100px
        }

    </style>
</head>
<body ontouchstart="">
<section class="ui-container">
    <div style="margin:0 auto;width:95%;padding-top:5px">
        <ul class="ui-row">
            <li class="ui-col ui-col-25">
                <button class="ui-btn ui-btn-primary" id="btnNewShop" style="margin-top: 2px;height: 40px">新增商家</button>
            </li>
            <li class="ui-col ui-col-75">
                <div class="ui-searchbar-wrap ui-border-b" style="">
                    <div class="ui-searchbar ui-border-radius">
                        <i class="ui-icon-search"></i>
                        <div class="ui-searchbar-text">搜索商家 ${txtSearchKey}</div>
                        <div class="ui-searchbar-input"><input value="${txtSearchKey}" id="txtSearchKey" type="text"
                                                               placeholder="搜索商家"
                                                               autocapitalize="off"></div>
                        <i class="ui-icon-close"></i>
                    </div>
                    <button class="ui-searchbar-cancel" id="btnCancel">取消</button>
                </div>

            </li>
        </ul>
    </div>

    <div class="ui-tab" id="tab1">
        <ul class="ui-tab-nav ui-border-b">
            <li data-div="normal_shops" class="current">正常商家</li>
            <li data-div="frozen_shops">被冻结的商家</li>
        </ul>

        <ul class="ui-tab-content" style="width: 100%">
            <li>
                <ul class="ui-list ui-list-pure ui-border-tb" id="normal_shops" nowPage="0" status="1"
                    tmpl="normal_shops_tmpl">
                    <c:if test="${parkingShopList != null &&  fn:length(parkingShopList) > 0 }">
                        <c:forEach var="parkingShop" items="${parkingShopList}">
                            <li class="ui-border-t" onclick="funcViewShopDetail('${parkingShop.id}')">
                                <div class="ui-row-flex" style="font-size: 17px;">
                                    <div class="ui-col ui-col-2">
                                        <span>${parkingShop.name} </span>
                                    </div>
                                    <div class="ui-arrowlink">
                                    </div>
                                </div>
                                <div class="ui-row-flex" style="margin-top: 0px">
                                    <div class="ui-col ui-col-2">
                                        <h5 class="ui-txt-info">${parkingShop.location}</h5>
                                    </div>
                                </div>
                                <div class="ui-row-flex">
                                    <div class="ui-col ui-col-2">
                                        <h5 class="ui-txt-info">
                                            <fmt:formatDate pattern="yyyy-MM-dd HH:mm:ss"
                                                            value="${parkingShop.createTime}"/>
                                        </h5>
                                    </div>
                                </div>
                            </li>
                        </c:forEach>
                    </c:if>

                    <c:if test="${parkingShopList == null ||  fn:length(parkingShopList) == 0 }">
                        <div class="ui-flex ui-flex-ver ui-flex-pack-center ui-flex-align-start"
                             style="height: 450px; overflow: auto; background-color: #f8f8f8">
                            <div id="noUnpayDiv" class="div-noUnpay">
                                <div>
                                    <img alt="" src="${ctx}/static/image/recharge/nodata.png" width="150px">
                                </div>
                                <div class="div-text" style="padding-top: 20px">无记录</div>
                            </div>
                        </div>
                    </c:if>
                </ul>
            </li>

            <li>
                <ul class="ui-list ui-list-pure ui-border-tb" id="frozen_shops" nowPage="0" status="0"
                    tmpl="frozen_shops_tmpl">
                    <c:if test="${frozenParkingShopList != null &&  fn:length(frozenParkingShopList) > 0 }">
                        <c:forEach var="frozenParkingShop" items="${frozenParkingShopList}">
                            <li class="ui-border-t" onclick="funcViewShopDetail('${frozenParkingShop.id}')">
                                <div class="ui-row-flex" style="font-size: 17px;">
                                    <div class="ui-col ui-col-2">
                                        <span>${frozenParkingShop.name} </span>
                                    </div>
                                    <div class="ui-arrowlink">
                                    </div>
                                </div>
                                <div class="ui-row-flex" style="margin-top: 0px">
                                    <div class="ui-col ui-col-2">
                                        <h5 class="ui-txt-info">${frozenParkingShop.location}</h5>
                                    </div>
                                </div>
                                <div class="ui-row-flex">
                                    <div class="ui-col ui-col-2">
                                        <h5 class="ui-txt-info">
                                            <fmt:formatDate pattern="yyyy-MM-dd HH:mm:ss"
                                                            value="${frozenParkingShop.createTime}"/>
                                        </h5>
                                    </div>
                                </div>
                            </li>
                        </c:forEach>
                    </c:if>
                    <c:if test="${frozenParkingShopList == null ||  fn:length(frozenParkingShopList) == 0 }">
                        <div class="ui-flex ui-flex-ver ui-flex-pack-center ui-flex-align-start"
                             style="height: 450px; overflow: auto; background-color: #f8f8f8">
                            <div id="noUnpayFrozenDiv" class="div-noUnpay">
                                <div>
                                    <img alt="" src="${ctx}/static/image/recharge/nodata.png" width="150px">
                                </div>
                                <div class="div-text" style="padding-top: 20px">无记录</div>
                            </div>
                        </div>
                    </c:if>
                </ul>
            </li>
        </ul>
    </div>

</section>


<section>
    <div class="ui-dialog div-button-ui-dialog">
        <div class="ui-dialog-cnt">
            <div class="ui-dialog-ft">
                <button type="button" id="btnCheckDetailDailog" data-role="button">查看商家</button>
            </div>
            <div class="ui-dialog-ft">
                <button type="button" id="btnFrozenDialog" data-role="button">冻结商家</button>
            </div>
            <div class="ui-dialog-ft">
                <button type="button" id="btnDelDialog" data-role="button">删除</button>
            </div>
            <div class="ui-dialog-ft">
                <button type="button" id="btnEditDialog" data-role="button">编辑商家资料</button>
            </div>
            <div class="ui-dialog-ft">
                <button type="button" id="btnCancelDialog" data-role="button">取消</button>
            </div>
        </div>
    </div>
</section>

</body>
<script src="${ctx}/static/plug/frozenui-1.3.0/lib/zepto.min.js"></script>
<script src="${ctx}/static/plug/frozenui-1.3.0/js/frozen.js"></script>
<script>

    var paramObj = {
        "addShopParams": "${addShopParams}",
        "shopDetailParams": "${shopDetailParams}",
        "shopListParams": "${shopListParams}",
        "getShopListParams": "${getShopListParams}",
        "deleteShopParams": "${deleteShopParams}",
        "frozenShopParams": "${frozenShopParams}"
    };

    function funcViewShopDetail(shopId) {
        console.log("shopId:" + shopId);
        $(".div-button-ui-dialog").addClass("show");

        $("#btnCheckDetailDailog").click(function () {
            console.log("btnCheckDetailDailog." + shopId);
            var hrefUrl = "${action}?params=" + paramObj.shopDetailParams + "&shopId=" + shopId;
            window.location.href = hrefUrl;
        });
        var canFozen = true;
        $("#btnFrozenDialog").click(function () {
            if (canFozen) {

                var param = {
                    "params": paramObj.frozenShopParams,
                    "shopId": shopId
                };
                canFozen = false;
                console.log("btnFrozenDialog." + shopId);
                $.post("${action}", param, function (obj) {
                    console.log(obj);
                    removeLoadingDiv();
                    if (obj.result) {
                        reloadingData();
                        showTips("info", "冻结成功");
                    } else {
                        showTips("info", "冻结失败，请重试");
                    }
                    $(".div-button-ui-dialog").removeClass("show");
                    canFozen = true;
                });
            }
        });
        $("#btnDelDialog").click(function () {
            console.log("btnDelDialog." + shopId);
            var param = {
                "params": paramObj.deleteShopParams,
                "shopId": shopId
            };
            $.post("${action}", param, function (obj) {
                console.log(obj);
                removeLoadingDiv();
                if (obj.result) {
                    reloadingData();
                    showTips("info", "删除成功");
                } else {
                    showTips("info", "删除失败，请重试");
                }
                $(".div-button-ui-dialog").removeClass("show");
            });
        });
        $("#btnEditDialog").click(function () {
            console.log("btnEditDialog." + shopId);
            var hrefUrl = "${action}?params=" + paramObj.addShopParams + "&shopId=" + shopId;
            window.location.href = hrefUrl;
        });

    }

    $(function () {
        var tab = new fz.Scroll('.ui-tab', {
            role: 'tab',
            autoplay: false,
            interval: 3000
        });
        /* 滑动开始前 */
        tab.on('beforeScrollStart', function (from, to) {
            //console.log(from, to);
        })
        /* 滑动结束 */
        tab.on('scrollEnd', function (curPage) {
            //console.log(curPage);
            reloadingData();
        });

        $('#btnCancelDialog').click(function () {
            $(".div-button-ui-dialog").removeClass("show");
        });

        $('.ui-searchbar').click(function () {
            $('.ui-searchbar-wrap').addClass('focus');
            $('.ui-searchbar-input input').focus();
        });
        $('.ui-searchbar-cancel').click(function () {
            $('.ui-searchbar-wrap').removeClass('focus');
        });
        $(".ui-icon-search").click(function () {
            var txtSearchKey = $("#txtSearchKey").val();
            console.log("txtSearchKey:" + txtSearchKey);
            var currentDiv = $(".current").attr("data-div");
            $("#" + currentDiv).attr("searchKey", 1);
            reloadingData();
            //var hrefUrl = "${action}?params=" + paramObj.shopListParams+"&name="+txtSearchKey;
            //window.location.href = hrefUrl;
        });
        $(".ui-icon-close").click(function () {
            $("#txtSearchKey").val("");
        });


        $("#btnNewShop").click(function () {
            var hrefUrl = "${action}?params=" + paramObj.addShopParams;
            window.location.href = hrefUrl;
        });

        $(window).bind("scroll", scrollFn);
        function scrollFn() {
            var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight);
            //视窗的高度
            var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
            //隐藏的高度
            var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
            if (pageHeight - viewportHeight - scrollHeight < 10) {//如果满足触发条件，执行
                //console.log("scrollFn....");
                if (isLoading) {
                    return;
                }
                loadingData();
            }
        }
    });

    function reloadingData() {
        var currentDiv = $(".current").attr("data-div");
        $("#" + currentDiv).attr("nowPage", 0);
        needRefresh = true;
        loadingData();
    }

    var isLoading = false;
    var needRefresh = false;
    function loadingData() {
        if (isLoading) {
            return;
        }
        var currentDiv = $(".current").attr("data-div");
        if (!needRefresh) {
            if ($("#" + currentDiv).find(".nodata-div").length > 0) {
                isLoading = false;
                return;
            }
        }

        $("#" + currentDiv).attr("searchKey", 0);
        $("#" + currentDiv).append(getLoadingDiv());
        var page = parseInt($("#" + currentDiv).attr("nowPage")) + 1;
        var status = parseInt($("#" + currentDiv).attr("status"));
        var param = {
            "params": paramObj.getShopListParams,
            "page": page,
            "status": status,
            "name": $("#txtSearchKey").val()
        };
        isLoading = true;
        console.log(param);
        $.post("${action}", param, function (obj) {
            console.log(obj);
            removeLoadingDiv();
            if (obj.result) {
                var listData = obj.data;
                var tplId = $("#" + currentDiv).attr("tmpl");
                if (listData == null || listData.length == 0) {
                    if (page == 1) {
                        var tpl = $("#no_tmpl_data").html();
                        $("#" + currentDiv).append(template(tpl, {ctx: "${ctx}"}));
                    } else {
                        $("#" + currentDiv).append(getNoMoreDataDiv());
                    }
                } else {
                    $("#" + currentDiv).attr("nowPage", page);
                    if (page == 1) {
                        $("#" + currentDiv).empty();
                    }
                    var tpl = $("#" + tplId).html();
                    var tplHtml = template(tpl, {list: listData});
                    //console.log(tplHtml);
                    $("#" + currentDiv).append(tplHtml);
                }
            } else {
            }
            needRefresh = false;
            isLoading = false;
        });
    }

</script>
</html>